<script setup lang="ts">
import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
const emits = defineEmits(["close", "confirm"]);
import { ElMessage } from "element-plus";
const props = defineProps({
  //是否显示弹窗
  visible: {
    type: Boolean,
    default: false
  },
  //弹窗标题
  dialogTitle: {
    type: String,
    default: ""
  },
  //是否显示底部按钮
  isShowFooter: {
    type: Boolean,
    default: true
  }
});
const pureSetting = useSettingStoreHook();
const dialogVisible = ref(false);
const isFullScreen = ref(false); // 弹窗是否全屏
const handleCancelImageDialog = () => {
  emits("close");
};
const handleConfirmImageDialog = () => {
  if (imageList.length === 0) {
    ElMessage({
      type: "warning",
      message: "请选择图片"
    });
    return;
  }
  const chooseImages = imageList.filter(item => item.choose);
  emits("confirm", chooseImages);
  imageList.splice(0, imageList.length);
};
const imageList = reactive([]);
watch(
  () => props.visible,
  (newValue, oldValue) => {
    dialogVisible.value = newValue;
    if (newValue) {
      imageList.splice(0, imageList.length);
      for (let i = 0; i < 100; i++) {
        imageList.push({
          id: i + 1,
          url: "https://cbu01.alicdn.com/img/ibank/O1CN01EcsRb52860Y9I9skT_!!2214032417882-0-cib.jpg",
          choose: false
        });
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const handleChooseImage = (item, index) => {
  imageList[index].choose = !imageList[index].choose;
  imageList.map((val, idx) => {
    if (idx !== index) imageList[idx].choose = false;
  });
};
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :show-close="false"
    :class="[isFullScreen ? 'full-screen-dialog' : '']"
    width="800"
    :draggable="!isFullScreen"
    overflow
    @close="handleCancelImageDialog"
  >
    <template #header="{ titleId, titleClass }">
      <div class="dialog-header">
        <h4 :id="titleId" :class="titleClass">{{ props.dialogTitle }}</h4>
        <div class="dialog-header_right">
          <el-icon
            v-if="!isFullScreen"
            :size="20"
            class="mr-2"
            @click="isFullScreen = true"
          >
            <component
              :is="useRenderIcon('material-symbols-light:zoom-out-map-rounded')"
            />
          </el-icon>
          <el-icon v-else :size="21" class="mr-2" @click="isFullScreen = false">
            <component
              :is="useRenderIcon('material-symbols-light:zoom-in-map')"
            />
          </el-icon>
          <el-icon :size="17" @click="handleCancelImageDialog">
            <component :is="useRenderIcon('ci:close-lg')" />
          </el-icon>
        </div>
      </div>
    </template>
    <div class="dialog-content_image_inner">
      <div class="dialog-content_image_inner_list">
        <el-row>
          <el-col
            v-for="(item, index) in imageList"
            :key="index"
            :span="4"
            @click="handleChooseImage(item, index)"
          >
            <div class="dialog-content_image_inner_list_item">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.url"
                fit="fill"
              />
              <div v-if="item.choose" class="image-mask">
                <IconifyIconOnline
                  icon="pajamas:check-sm"
                  width="60px"
                  height="60px"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <template v-if="props.isShowFooter" #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirmImageDialog()">
          确认
        </el-button>
        <el-button @click="handleCancelImageDialog()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-content_image_inner {
  height: 600px;
  overflow-y: auto;

  &_list {
    display: flex;
    align-items: center;

    &_item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;

      :deep(.el-image),
      .image-mask {
        border-radius: 10px;
      }

      .image-mask {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        color: #00ffa1;
        background-color: rgb(0 0 0 / 50%);
      }
    }
  }
}
</style>
